JavaScript Stack and Queue
Data structure is a very important topic that is often asked during technical interviews and mandatory course in school. 
Today, I want to dive into the two of the most common data structures: stack and queue.

What is a Stack?
A stack is a type of data structure that is linear where order is conserved. 
For many people, stack is known to have a LIFO (Last In First Out) mechanism. 
Let’s take a look at an example of a stack in real life: stack of plates.



If you weren’t allow to take plates from the middle and all you can only see the top most plate, this is a stack!

Now that we know how a stack works, let’s implement it in JavaScript! In our implementation we will write the basic methods for a stack like push, pop, and peek.

Implementation #1 (Array)

class Stack {
  constructor() {
    this.stack = []
  }
  
  // Inserts the element into the top of the stack
  push(element) {
    this.stack.push(element)
  }
  
  // Removes the element from the top of the stack and return that element
  pop() {
    if (this.isEmpty()) return 'Stack is empty!'
    return this.stack.pop()
  }
  
  // Return which element is on top of the stack
  peek() {
    if (this.isEmpty()) return 'Stack is empty'
    return this.stack[this.stack.length - 1]
  }
  
  // helper method
  isEmpty() {
    return !this.stack.length
  }
}
view rawstack.js hosted with ❤ by GitHub

Implementation #2 (Linked List)


class Node {
  constructor(next, value) {
    this.next = next
    this.value = value
  }
}

class Stack {
  constructor() {
    this.stack = null
  }
  
  push(element) {
    let head = this.stack
    let newNode = new Node(null, element)
    
    if (!head) {
      this.stack = newNode
    } else {
      newNode.next = head
      this.stack = newNode
    }
  }
  
  pop() {
    let head = this.stack
    
    if (!head) return 'Stack is empty!'
    
    this.stack = head.next
    return head.value
  }
  
  peek() {
    if(!this.stack) return 'Stack is empty!'
    return this.stack.value
  }
}
view rawstack-linked-list.js hosted with ❤ by GitHub


What is a Queue?
Similar to a stack, queue is a linear data structure where it obeys the FIFO (First In First Out) mechanism. 
You can think of a queue as a single line of people at a fast food restaurants.



Given that no one cuts anyone, first person on the line will get to order the food first and the last person will be the last one to order. 
This is an example of a queue!


Now that we know how a queue works, let’s implement it in JavaScript! In our implementation we will write the basic methods for a queue like enqueue, dequeue, and peek.

Implementation #1 (Array)



class Queue {
  constructor() {
    this.queue = []
  }
  
  enqueue(element) {
    this.queue.push(element)
  }
  
  dequeue() {
    if (this.isEmpty()) return 'Queue is empty' 
    return this.queue.shift()
  }
  
  peek() {
    if (this.isEmpty()) return 'Queue is empty'
    return this.queue[0]
  }
  
  // helper method
  isEmpty() {
    return !this.queue.length
  }
}

Implementation #2 (Linked List)


class Node {
  constructor(next, value) {
    this.next = next
    this.value = value
  }
}

class Queue {
  constructor() {
    this.queue = null
  }
  
  enqueue(element) {
    let head = this.queue
    let newNode = new Node(null, element)
    
    if (!head) {
      this.queue = newNode
    } else {
      let traverseNode = head
      while (traverseNode.next) {
        traverseNode = traverseNode.next
      }
      traverseNode.next = newNode
    }
  }
  
  dequeue() {
    let head = this.queue
    
    if (!head) return 'Queue is empty!'
    
    this.queue = head.next
    return head.value
  }
  
  peek() {
    if(!this.queue) return 'Queue is empty!'
    return this.queue.value
  }
}

Those are stack and queue implemented in JavaScript!